﻿@page "/bswup"
@page "/bswup/overview"
@inherits AppComponentBase

<PageOutlet Url="bswup/overview"
            Title="Overview - Bswup"
            Description="overview of the bit Bswup" />

<div class="page-container">
    <BitText Typography="BitTypography.H3" Gutter>Bswup</BitText>
    <br />
    <BitText Typography="BitTypography.H5" Gutter>Blazor Service Worker Update Progress utilities</BitText>
    <br />
    <BitText Typography="BitTypography.Subtitle1">
        bit Bswup is a set of tools that assists developers in making the most out of the
        Service Worker when building PWAs with Blazor.
        It utilizes the Service Worker's events to handle Installing and Updating the app
        as fast and smooth as possible while minimizing the download size.
        <br />
        This unique tool harnesses the power of Progressive Web Apps (PWA) within the innovative
        new structure of dotnet 8. By amalgamating pre-rendering techniques reminiscent of renowned
        platforms like GitHub, Reddit, and Facebook, Bswup ensures an exceptional user experience.
    </BitText>
    <br />
    <div class="section-card-txt">
        <b>Note</b>: Currently, bit Bswup is the only tool that can enable complete PWA solution for the new Blazor web app
        project template that introduced in .NET 8 which has different render mode (Auto, Server, WebAssembly).
    </div>
    <br />
    <br />
    <div class="section-card-txt">
        You can watch this step by step walkthrough video to see bit Bswup in action:
    </div>
    <br />
    <div class="video-container">
        <iframe src="https://www.youtube.com/embed/Y4MTtF1XMfM?si=OsH6RnUd8uKOBHU_"
                width="560" height="315" allowfullscreen title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
    </div>
    <br />
    <div class="section-card-txt">
        You can find the sample source-code of the above video
        <a href="https://github.com/bitfoundation/bitplatform-samples/tree/develop/videos/Bit.Bswup" target="_blank">here</a>.
    </div>
    <br /><br /><br />
    <img src="/images/bswup/bswup1.webp" class="bswup-img" />
    <br /><br />
    <img src="/images/bswup/bswup2.webp" class="bswup-img" />
    <br /><br />
    <img src="/images/bswup/bswup3.webp" class="bswup-img" />
    <br /><br />
    <img src="/images/bswup/bswup4-1.webp" class="bswup-img" />
    <br />
    <img src="/images/bswup/bswup4-2.webp" class="bswup-img" />
    <br /><br />
    <BitText Typography="BitTypography.H6" Gutter>Supported browsers</BitText>
    <div class="section-card-txt">
        <ul>
            <li>
                <BitText Typography="BitTypography.Body1" Gutter>
                    Blazor is supported in the browsers shown in the following list on both mobile and desktop platforms.
                </BitText>
                <ul dir="auto">
                    <li>Apple Safari (Current† version)</li>
                    <li>Google Chrome (Current† version)</li>
                    <li>Microsoft Edge (Current† version)</li>
                    <li>Mozilla Firefox (Current† version)</li>
                </ul>
            </li>
        </ul>
    </div>
    <br />
</div>

<NavigationButtons Next="Install" NextUrl="/bswup/install" />